<!-- 
说明：上传图片
作者：xj
日期：2018-7-11 11:4:28
版本：1.0.0
-->
<template>
  <div>
    <!-- <vue-core-image-upload :class="['btn', 'btn-primary']"
                           inputAccept="image/*"
                           inputOfFile="file"
                           :credentials="false"
                           :crop="false"
                           :compress="compress"
                           @imageuploaded="imageuploaded"
                           @imageuploading="imageuploading"
                           :data="uploadParam"
                           :url="updateUrl"> -->
    <!-- 图片上传 -->
    <cm-ue-upload :action="updateUrl"
                  ref="upload"
                  :token="getToken"
                  @fail="imgFail"
                  :cut="false"
                  :width="size.width*2"
                  :height="size.height*2"
                  @start="imageuploading"
                  @success="imageuploaded"></cm-ue-upload>
    <a href="javascript:void(0)"
       :style="imgSize"
       class="needsclick a">
      <img :src="src"
           class="needsclick img"
           @click.stop="clickImage()"></img>
    </a>
    </vue-core-image-upload>
  </div>
</template>

<script>
  
  import CmUeUpload from '@/components/upload'
  export default {
    name: 'cm-ue-upload-imgs',
    props: {
      extend: {
        type: Object,
        default () {
          return {
            size: '',
            radius: '0%'
          }
        }
      },
      value: String,
      emptyImg: '',
      imgtype: {
        type: String,
        default: 'png'
      }
    },
    data () {
      return {
        loading: false,
        compress: 0.5,
        title: '上传图片',
        empty: ''
      }
    },
    watch: {
      emptyImg: {
        immediate: true,
        handler (val) {
          // 参考网站： https://blog.csdn.net/qq_16559905/article/details/78492350
          // 遍历@image下所有文件找到制定的图片并加载
          let context = require.context('@image/', true)
          // context.keys() //打印所有匹配的列表
          // 找到匹配的图片
          this.empty = context(`./${val}.${this.imgtype}`)
        }
      }
    },
    computed: {

      // 图片大小
      imgSize () {
        let size = (this.extend.size + '').split(' ')
        return {
          width: this.px2rem(size[0]),
          height: this.px2rem(size.length === 2 ? size[1] : size[0]),
          borderRadius: this.extend.radius + '%'
        }
      },
      size () {
        let size = (this.extend.size + '').split(' ')
        return {
          width: size[0],
          height: size.length === 2 ? size[1] : size[0]
        }
      },
      // 上传地址
      updateUrl () {
        return this.$store.state.uploadAction
      },
      // token,上传参数
      uploadParam () {
        return {
          token: this.$store.state.token
        }
      },
      getToken () {
        return this.$store.state.token
      },
      src () {
        return this.value || this.empty
      }
    },
    methods: {
      clickImage () {
        this.$refs.upload.start()
      },
      imgFail (res) {
        this.$toast(res)
      },
      px2rem (px) {
        let rem = 100
        return `${px / rem}rem`
      },
      // 设置父类样式
      getStylu () {
        let size = (this.extend.size + '').split(' ')
        return {
          main: {
            width: this.px2rem(size[0]),
            height: this.px2rem(size.length === 2 ? size[1] : size[0])
          }
        }
      },
      // 开始上传
      imageuploading () {
        this.$emit('start')
      },
      // 上传结果
      imageuploaded (res, h, w) {
        // viewAction
        let str = `${this.$store.state.uploadAction}?key=${res}&token=${this.$store.state.token}&h=${h}&w=${w}`
        this.$emit('input', str, res.key)
      }
    },
    mounted () {
    },
    components: {
      CmUeUpload
    }
  }
</script>

<style lang="stylus">
// .btn-primary {
// width: 100%;
// height: 100%;

// form {
// position: absolute !important;
// left: 0 !important;
// right: 0 !important;
// top: 0 !important;
// bottom: 0 !important;
// height: 100% !important;
// width: 100% !important;

// input {
// position: absolute !important;
// }
// }
// }
.a {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  .img {
    max-width: 100%;
    max-height: 100%;
    // line-height: 1.8;
  }
}
</style>
